<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // ES5的类： 构造函数

      // function Person(name,age){
      //     this.name = name;
      //     this.age = age;
      // }

      // Person.prototype.walk = function(){
      //     console.log("走");
      // }

      // let zhangsan = new Person("张三",20);

      // zhangsan.walk();

      // ES6的类
      // 类的定义；
      // class Person{
      //     constructor(name,age){
      //         this.name = name;
      //         this.age = age;
      //     }
      //     walk(){
      //         console.log("走");
      //     }
      // }

      // // console.log(typeof Person);
      // // 调用
      // let zhangsan = new Person("张三",20);
      // zhangsan.walk();
      // console.log(zhangsan);

      // let obj = {
      //     fn:function(){

      //     },
      //     fn1(){

      //     }
      // }

      // 1.ES6的语法；
      // 2.ES6的类本质上是函数 ；ES6的类是一种语法糖；
      // 3.ES6类里的函数 自动放在原型上；
      // 4.如果类没有属性那么 constructor 可以省略；
      // class Person{
      //     walk(){
      //         console.log("走")
      //     }
      // }

      // let zhangsan = new Person();
      // zhangsan.walk();
      // 5.属性的多种定义方式
      // class Person{
      //     age = 20;
      //     constructor(name){
      //         this.name = name;
      //         // this.age = 20;
      //     }
      //     walk(){
      //         console.log("走");
      //     }
      // }

      // let zhangsan = new Person("张三");
      // console.log(zhangsan);

      // 6.属性的get和set定义方式；
      class Person {
        constructor(name) {
          this.name = name;
        }
        // 获取属性的时候会触发get函数，且属性的值是get函数的返还值；
        get age() {
          console.log("get");
          return 20;
        }
        set age(newValue) {
          // set 会在设置属性的时候触发 set函数；
          console.log("set", newValue);
        }
      }
      let zhangsan = new Person("张三");
      //     console.log(zhangsan);
      //   let res =   zhangsan.age   // 获取age属性；
      //   console.log(res);
      zhangsan.age = 30; //set 操作 设置操作；

      /* 
        // 1.ES6的语法；
        // 2.ES6的类本质上是函数 ；ES6的类是一种语法糖；
        // 3.ES6类里的函数 自动放在原型上；
        // 4.如果类没有属性那么 constructor 可以省略；
           5.属性的多种定义方式 
           6.属性的get和set定义方式；
        
        */
    </script>
  </body>
</html>
